<template>
  <view>
    <div class="row col-md-12" >
      <div id="mapContainer" class="col-md-6" style="width: 100%;" :style="{height:mapHeight}">正在加载数据 ...</div>
    </div>
  </view>
</template>
<script type="text/ecmascript-6">
  import AMapLoader from '@amap/amap-jsapi-loader';
  import systemConfig from '@/common/config/systemConfig.js'
  export default {
    props: {
		lat:{
			type: Number,
			default: null
		},
		lng:{
			type: Number,
			default: null
		},
		errorRange: {
			type: Number,
			default: 50
		},
		infoContent: {
			type: String,
			default: '目标地点'
		},
		mapHeight:{
			type: String,
			default: '400rpx'
		}
	},
    data () {
      return {
        keyWord: '',
        placeSearch: null,
        dragStatus: false,
        AMapUI: null,
        AMap: null,
		locationData:{},
		locationMarker:null,
		map:null,
		mapConfig:null,
      }
    },
    methods: {
      // 搜索
      handleSearch () {
        if (this.keyWord) {
          this.placeSearch.search(this.keyWord)
		}
	  },
      // 实例化地图
      initMap () {
        // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
        let AMapUI = this.AMapUI = window.AMapUI
        let AMap = this.AMap = window.AMap
		const vim= this
		AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
			if(!this.mapConfig){
				let mapConfig = {
					zoom: 15
				}
				let position= [this.lng, this.lat]
				if (this.lat && this.lng) {
					mapConfig.center = position
				}
				this.mapConfig=mapConfig
			}
			
			let map = new AMap.Map('mapContainer', this.mapConfig)
			// 将创建的点标记添加到已有的地图实例：
			if (this.lat && this.lng) {
				let marker = new AMap.Marker({
					position: new AMap.LngLat(this.lng, this.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					title: '目标地点',
				})
				//创建信息窗体
				let infoWindow = new AMap.InfoWindow({
					content:this.infoContent,//信息窗体的内容
					offset:new AMap.Pixel(1, -35)
				});
				//点击marker显示信息框
				marker.on('click', function(p){
				    //将marker放到指定坐标
				    infoWindow.open(map,marker.getPosition());
				});
				let circle = new AMap.Circle({
					center: new AMap.LngLat(this.lng, this.lat),  // 圆心位置
					radius: this.errorRange, // 圆半径
					fillColor: '#0081ff',   // 圆形填充颜色
					strokeColor: '#fff', // 描边颜色
					strokeWeight: 1, // 描边宽度
					strokeOpacity:0.4//透明度
				})
				
				map.add(marker);
				map.add(circle)
			}
			
			if(this.locationMarker){
				let locationMarker = this.locationMarker
				//点击marker显示信息框
				//创建信息窗体
				let locationWindow = new AMap.InfoWindow({
					content:'我的位置',//信息窗体的内容
					offset:new AMap.Pixel(1, -35)
				});
				locationMarker.on('click', function(p){
				    //将marker放到指定坐标
				    locationWindow.open(map,locationMarker.getPosition());
				});
				map.add(locationMarker);
			}
			
			//启用工具条 +-放大缩小
			AMap.plugin(['AMap.ToolBar'], function () {
				map.addControl(new AMap.ToolBar({
				position: 'RB'
			}))			
		})
		  
		})
		  
	  },
	  h5Geolocation(){
	  	let AMap = window.AMap
		if(!AMap){
			return
		}
	  	const vim=this
	  	AMap.plugin('AMap.Geolocation', function () {
	  	    let geolocation = new AMap.Geolocation({
	  	        enableHighAccuracy: true,//是否使用高精度定位，默认:true
	  	        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
	  	        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
	  	        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
	  	        showButton: true,        //显示定位按钮，默认：true
	  	        buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
	  	        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
	  	        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
	  	        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
	  	        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
	  	        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
	  	    })
	  	    geolocation.getCurrentPosition(function(status,result){
	  	            if(status=='complete'){
	  	                onComplete(result)
	  	            }else{
	  	                onError(result)
	  	            }
	  	      });
	  	      function onComplete (result) {
	  	        // result是具体的定位信息
				vim.locationData = result
				let mapConfig = {
					zoom: 15
				}
				let position= [result.position.lng, result.position.lat]
				if (result.position.lng && result.position.lat) {
					mapConfig.center = position
					vim.mapConfig=mapConfig
					let marker = new AMap.Marker({
						position: new AMap.LngLat(result.position.lng, result.position.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
						title: '我的位置',
					})
					vim.locationMarker=marker
					vim.initMap()
				}
	  			const addressComponent = result.addressComponent
	  			if(addressComponent){
					const regeocodeData=result
					regeocodeData.formatted_address=result.formattedAddress
					const retData = {}
					retData.regeocodeData=regeocodeData
					retData.latitude=result.position.lat
					retData.longitude=result.position.lng
					vim.$emit('change',retData);
				}else{
					if(result.position.lng&&result.position.lat){
						AMap.plugin('AMap.Geocoder', function() {
						  let geocoder = new AMap.Geocoder({
						    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
						    city: '全国',
							extensions:'all'
						  })
						  let lnglat = [result.position.lng, result.position.lat]
						  geocoder.getAddress(lnglat, function(status, data) {
						    if (status === 'complete' && data.info === 'OK') {
						        const regeocodeData=data.regeocode
								regeocodeData.formatted_address=data.regeocode.formattedAddress
								const retData = {}
								retData.regeocodeData=regeocodeData
								retData.latitude=result.position.lat
								retData.longitude=result.position.lng
								vim.$emit('change',retData);
						    }else{
								vim.$emit('change',null);
							}
						  })
						})
					}
				}
	  	      }
	  	    
	  	      function onError (result) {
	  	        // 定位出错
				vim.$emit('change',null);
	  	      }
	  	})
	  }
    },
   
	async created () {
	  // 已载入高德地图API，则直接初始化地图
	  if (window.AMap && window.AMapUI) {
	    this.h5Geolocation()
	    // 未载入高德地图API，则先载入API再初始化
	  } else {
		  AMapLoader.load({
		      "key": systemConfig.amapH5Key,              // 申请好的Web端开发者Key，首次调用 load 时必填
		      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		      "plugins": ['AMap.Geolocation','AMap.ToolBar'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
		      "AMapUI": {             // 是否加载 AMapUI，缺省不加载
		          "version": '1.1',   // AMapUI 缺省 1.1
		          "plugins":[],       // 需要加载的 AMapUI ui插件
		      }
		      
		  }).then((AMap)=>{
			  this.h5Geolocation()
			  
		  }).catch(e => {
		      this.$emit('change',null);
		  })
	  }
	}
  }
</script>
